<template>
    <div style="height: 100%;  background-color: #f1f1f1;">
        <header class="hd">
            <span style="padding: 0 .2415rem;" @click="router.go(-1)">返回</span>
            <span>我的发布列表</span>
            <span style="padding: 0 .2415rem;"></span>
        </header>
        <div class="hidden">
            <span style="padding: 0 .2415rem;">返回</span>
            <span>我的发布列表</span>
            <span style="padding: 0 .2415rem;"></span>
        </div>
        <main>
            <el-card class="box-card" v-for="item in List.data" :key="item.id">
                <template #header>
                    <div class="card-header">
                        <span>{{ item.user.username }}</span>
                        <span>{{ item.createdAt }}</span>
                    </div>
                </template>
                <div class="item">
                    <span style="flex:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">标题：</span>
                    <span
                        style="flex:4;text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.title }}</span>
                </div>
                <div class="item">
                    <span style="flex:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">内容：</span>
                    <span
                        style="flex:4;text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.content }}</span>
                </div>
                <div class="operate">
                    <el-button type="primary" :icon="Delete">删除</el-button>
                </div>
            </el-card>
        </main>
    </div>
</template>

<script setup>
import { Delete } from '@element-plus/icons-vue'
import { ref,reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {queryArticleById} from '@/api/index'
const route = useRoute();
const router = useRouter();
let List = reactive({
    data:[]
})
onMounted(async() => {
    //console.log('3.-组件挂载到页面之后执行-------onMounted')
    let data = await queryArticleById(JSON.parse(localStorage.getItem('userInfo'))[0].id);
    console.log(data);
    List.data=data.data.data;
})
</script>
<style scoped lang='css'>
.hd {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-size: .4348rem;
    background-color: #fff;
    padding: .2415rem;
    margin-bottom: .2415rem;
}
.hidden {
    /* display: none; */
    display: flex;
    justify-content: space-between;
    font-size: .4348rem;
    background-color: #fff;
    padding: .2415rem;
    margin-bottom: .2415rem;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.item {
    margin-bottom: .4348rem;
    display: flex;
    justify-content: space-between;
}

.box-card {
    width: 100%;
    margin-bottom: .1208rem;
}

.operate {
    border-top: .0242rem solid #ccc9c9;
    margin-top: .1932rem;
    padding: .2415rem 0 0 0;
    display: flex;
    justify-content: flex-end;
}
</style>